<!--  -->
<template>
  <div class='Showpage'>
    <!-- 统计 -->
    <h1 class='statistical'>电力关键指标监测</h1>
    <!-- 指标 -->
    <div class='top clearfix'>
      <div class='left'>
        <div class='title'>
          <p>企业用能汇总</p>
        </div>
        <div class='bottom clearfix'>
          <div class='l'>
            <span>
              {{150}}
              <b>元</b>
              <span><i>icon</i>3.5%</span>
            </span>
            <p>日用能费用</p>
            <p style="color:#0780ED">能源费用占比</p>
          </div>
          <div class='r'>
            <span>{{300}}
              <b>元</b>
            </span>
            <p>月累计费用</p>
          </div>
          <div class='l1'>
            <span>
              {{5000}}
              <span>
                <b>t</b>
                <i>icon</i>1.5%
                </span>
              </span>
            <p>日总产量</p>
          </div> 
          <div class='r1'>
            <span>
              {{200}}
              <span>
                <b>元/t</b>
                <i>icon</i>1.5%</span></span>
            <p>日产品综合能源成本</p>
          </div>
        </div>
      </div>
    <!-- 企业用能汇总 -->
      <div class='center'>
         <div class='title'>
          <span :class='{active:tabactive === 1}' @click='tabclick(1)'>企业用能汇总</span>
          <span :class='{active:tabactive === 2}' @click='tabclick(2)'>企业用汽汇总</span>
          <span :class='{active:tabactive === 3}' @click='tabclick(3)'>其他用能汇总</span>
          <b>2015-5-18</b>
        </div>
        <div class='bottom clearfix' v-show="tabactive === 1">
          <div class='l'>
            <span>{{1.98}}
              <b>元</b>
              <span><i>icon</i>3.5%</span></span>
            <p>日用汽费</p>
          </div>
          <div class='r'>
            <span>{{60}}
              <b>%</b>
              </span>
            <p>本月完成计划量</p>
          </div>
          <div class='l1'>
            <span>{{5000}}
              <span>
              <b>t</b>
              <i>icon</i>1.5%
              </span>
            </span>
            <p>日用汽量</p>
          </div> 
          <div class='r1'>
            <span>{{10000}}
              <b>万kWh%</b>
            </span>
            <p>年累计用电量</p>
          </div>
        </div>
      </div>
    <!-- tab切换 -->
      <div class='right'>
        <div class='title'>
          <p>电力价值反馈</p>
        </div>
        <div class='bottom clearfix'>
          <div class='l'>
            <span>{{0.95}}<i>icon</i></span>
            <p>本月完成计划量</p>
          </div>
          <div class='r'>
            <span>{{0.95}}</span>
            <p>本月当前</p>
            <p>平均功率因数</p>
          </div>
          <div class='b'>
            <span>{{1000}}
              <b>元</b>
              <i>icon</i></span>
            <p>功率因数预期累计收益</p>
          </div>          
        </div>
      </div>
    <!-- 电力价值反馈 -->
    </div>    
  
    <!-- 图表 -->
    <div class='ec clearfix'>
      <div class='ec_left'>
        <div class='title'>
          <p>合算单元用能费用汇总</p>
        </div>
        <div id='left-EC' style="width:466px;height:350px"></div>
      </div>
      <div class='ec_right'>
        <div class='title'>
          <p>合算用能单元对比</p>
        </div>
        <div id='right-EC' style="width:474px;height:350px"></div>
      </div>
    </div>
     <div class='ec_bottom'>
        <div class='title'>
          <p>总能源费用与产品对比<span>
            <b>（近30天）</b>
            </span></p>
        </div>
        <div id='bottom-EC' style="width:970px;height:370px"></div>
      </div>
  </div>
</template>

<script>
import echarts from "echarts";
// import "./index.scss";
export default {
  data() {
    return {
      tabactive:1
    };
  },
  created() {},
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart2.dispose();
    this.chart = null;
    this.chart2 = null;
  },
  methods: {
    tabclick(n){
      this.tabactive = n
    },
    initChart() {
      this.chart = echarts.init(document.getElementById("left-EC"));
      const xData = (function() {
        const data = [];
        for (let i = 1; i < 9; i++) {
          data.push(i + "#车间");
        }
        return data;
      })();
      this.chart.setOption({
        backgroundColor: "#fff",
        color: [
          "#0050E2",
          "#00AFC3",
          "#0780ED",
          "#44D428",
          "#FFC100",
          "#FF9200",
          "#EC0040",
          "#FF5227"
        ],
        title: {
          text: "元",
          left: 0,
          textStyle: {
            color: "#999",
            fontSize: "12"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            textStyle: {
              color: "#fff"
            }
          }
        },
        grid: {
          // 网格位置 right
          right: 0,
          // 网格底部距离
          bottom: 80
        },
        legend: {
          // 图例宽度
          width: "90%",
          // 图例icon宽度
          itemWidth: 20,
          // 图例icon高度
          itemHeight: 10,
          // 图例位置  right
          right: 0,
          // 图例样式
          textStyle: {
            color: "#90979c",
            fontSize: "12"
          },
          data: [
            { name: "#1配电室", icon: "" },
            { name: "#2配电室", icon: "" }
          ]
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#999"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: function(value, index) {
                let s = value.split("#")[0];
                let s1 = value.split("#")[1];
                let s2 = s1.split("").join("\n");
                //  return value.split("").join("\n");
                return s + "#" + "\n" + s2;
              }
            },
            data: xData
          }
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#e5e5e5",
                type: "dotted"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#999",
                width: 0
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "#1配电室",
            type: "bar",
            stack: "total",
            barMaxWidth: 24,
            barGap: "10%",
            data: [
              709,
              1917,
              2455,
              2610,
              1719,
              1433,
              1544,
              3285,
              5208,
              3372,
              2484,
              4078
            ]
          },

          {
            name: "#2配电室",
            type: "bar",
            stack: "total",
            data: [
              327,
              1776,
              507,
              1200,
              800,
              482,
              204,
              1390,
              1001,
              951,
              381,
              220
            ]
          }
        ]
      });
      this.chart2 = echarts.init(document.getElementById("right-EC"));
      
       const xData2 = (function() {
        const data = [];
        for (let i = 1; i < 9; i++) {
          data.push(i + "#车间");
        }
        return data;
      })();
      this.chart2.setOption({
        backgroundColor: "#fff",
        color: [
          "#0050E2",
          "#00AFC3",
          "#0780ED",
          "#44D428",
          "#FFC100",
          "#FF9200",
          "#EC0040",
          "#FF5227"
        ],
        title: {
          text: "kwh",
          left: 0,
          textStyle: {
            color: "#999",
            fontSize: "12"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            textStyle: {
              color: "#fff"
            }
          }
        },
        grid: {
          // 网格位置 right
          right: 0,
          // 网格底部距离
          bottom: 80
        },
        legend: {
          // 图例宽度
          width: "90%",
          // 图例icon宽度
          itemWidth: 20,
          // 图例icon高度
          itemHeight: 10,
          // 图例位置  right
          right: 0,
          // 图例样式
          textStyle: {
            color: "#90979c",
            fontSize: "12"
          },
          data: [
            { name: "#1配电室", icon: "roundRect" },
            { name: "#2配电室", icon: "roundRect" }
          ]
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#999"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: function(value, index) {
                let s = value.split("#")[0];
                let s1 = value.split("#")[1];
                let s2 = s1.split("").join("\n");
                //  return value.split("").join("\n");
                return s + "#" + "\n" + s2;
              }
            },
            data: xData2
          }
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#e5e5e5",
                type: "dotted"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#999",
                width: 0
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "#1配电室",
            type: "bar",
            stack: "total",
            barMaxWidth: 24,
            barGap: "10%",
            data: [
              709,
              1917,
              2455,
              2610,
              1719,
              1433,
              1544,
              3285,
              5208,
              3372,
              2484,
              4078
            ]
          },

          {
            name: "#2配电室",
            type: "line",
            stack: "total",
            data: [
              327,
              1776,
              507,
              1200,
              800,
              482,
              204,
              1390,
              1001,
              951,
              381,
              220
            ]
          }
        ]
      });
      this.chart3 = echarts.init(document.getElementById("bottom-EC"));
      const xData3 = (function() {
        const data = [];
        for (let i = 1; i < 32; i++) {
          data.push(i + "#车间");
        }
        return data;
      })();
      this.chart3.setOption({
        backgroundColor: "#fff",
        color: [
          "#0050E2",
          "#00AFC3",
          "#0780ED",
          "#44D428",
          "#FFC100",
          "#FF9200",
          "#EC0040",
          "#FF5227"
        ],
        title: {
          text: "kwh",
          left: 0,
          textStyle: {
            color: "#999",
            fontSize: "12"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            textStyle: {
              color: "#fff"
            }
          }
        },
        grid: {
          // 网格位置 right
          right: 0,
          left:50,
          // 网格底部距离
          bottom: 80
        },
        legend: {
          // 图例宽度
          width: "90%",
          // 图例icon宽度
          itemWidth: 20,
          // 图例icon高度
          itemHeight: 10,
          // 图例位置  right
          right: 0,
          // 图例样式
          textStyle: {
            color: "#90979c",
            fontSize: "12"
          },
          data: [
            { name: "#1配电室", icon: "roundRect" },
            { name: "#2配电室", icon: "roundRect" }
          ]
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#999"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: function(value, index) {
                 return value.split("").join("\n");
              },
              rotate:-20,
              verticalAlign:'top'
            },
            data: xData3
          }
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#e5e5e5",
                type: "dotted"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#999",
                width: 0
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "#1配电室",
            type: "bar",
            stack: "total",
            barMaxWidth: 12,
            barGap: "10%",
            data: [
              709,
              1917,
              2455,
              2610,
              1719,
              1433,
              1544,
              3285,
              5208,
              3372,
              2484,
              4078,
              709,
              1917,
              2455,
              2610,
              709,
              1917,
              2455,
              2610,
              1719,
              1433,
              1544,
              3285,
              5208,
              3372,
              2484,
              4078,
              1719,
              1433,
              1544,
              3285,
              5208,
              3372,
              2484,
              4078,
              
            ]
          },

          {
            name: "#2配电室",
            type: "line",
            stack: "total",
            data: [
              327,
              1776,
              507,
              1200,
              800,
              482,
              204,
              1390,
              709,
              1917,
              2455,
              2610,
              1719,
              1433,
              1544,
              3285,
              5208,
              3372,
              2484,
              4078,
              709,
              1917,
              2455,
              2610,
              1719,
              1433,
              1544,
              3285,
              5208,
              3372,
              2484,
              4078,
              1001,
              951,
              381,
              220
            ]
          }
        ]
      });

    }
  }
};
</script>

<style lang='scss' scoped>
b{
  font-size: 12px;
  color: #999;
  font-weight: normal
}
i{
  font-size: 12px
}
.Showpage {
  width: 990px;
  background: #f5f5f5;
  margin: 0 auto;
  .statistical {
    color: #333;
    font-size: 20px;
    padding: 10px 0;
  }
  // 图表
  .ec {
    margin: 10px 0;
    .ec_left {
      width: 486px;
      height: 429px;
      float: left;
      background: #fff;
      padding: 0 10px;
      box-sizing: border-box;
      .title {
        border-bottom: 1px solid #e9e9e9;
        color: #333;
        font-size: 16px;
        padding: 20px 10px;
        margin-bottom: 20px;
      }
    }
    .ec_right {
      width: 494px;
      height: 429px;
      float: right;
      background: #fff;
      padding: 0 10px;
      box-sizing: border-box;
      .title {
        border-bottom: 1px solid #e9e9e9;
        color: #333;
        font-size: 16px;
        padding: 20px 10px;
        margin-bottom: 20px;
      }
    }
  }
  .ec_bottom{
    margin: 10px 0;  
    background: #fff; 
    width: 100%;
    height: 450px; 
    padding: 0 10px;    
    box-sizing: border-box;    
    .title {
        border-bottom: 1px solid #e9e9e9;
        color: #333;
        font-size: 16px;
        padding: 20px 10px;
        margin-bottom: 20px;
      }  
  }
  .top{
    >div{
      background: #fff;
      float: left;
      padding: 0 10px;
      box-sizing: border-box;
    }
    .left,.center{
      width: 288px;
      height: 282px;
       .title {
      width: 100%;
      border-bottom: 1px solid #e9e9e9;
      color: #333;
      font-size: 16px;
      padding: 20px 10px;
      box-sizing: border-box;      
      }
      .bottom{
        padding: 10px 0;
        >div{
          float: left;
          text-align: center;
          box-sizing: border-box;
          height: 101px;
          width: 50%;
          display:flex;
          flex-direction: column;
          justify-content:center;
          align-items: center;  
          p{
            padding-top:5px;            
            color:#666;
            font-size: 14px;
          }
          >span{
            display: inline-block;
            color: #333;
            font-size: 16px;
            span{
              font-size: 12px;
            }
            i{
              font-size: 12px;
              color: #FF9200;
              margin-left: 5px;
            }
          }
        }
        .l{
          border-right:1px solid #e9e9e9; 
          border-bottom:1px solid #e9e9e9;             
        }
        .r{
          border-bottom:1px solid #e9e9e9;                       
        }
        .l1{
          border-right:1px solid #e9e9e9;  
        }
      }
    }
    .center{
      width: 410px;
      height: 282px;
      margin-left: 2px;
      margin-right: 10px;
      .title{
        span{
          margin-right: 1px;
          padding-bottom: 15px;
        }
        .active {
        color: #0780ed;
        border-bottom: 3px solid #0780ed;
        }
        i{
          color: #999;
          font-size: 12px;
        }
      }
    }
    .right{
      width: 280px;
      height: 282px;
      .title {
      width: 100%;
      border-bottom: 1px solid #e9e9e9;
      color: #333;
      font-size: 16px;
      padding: 20px 10px;
      box-sizing: border-box;      
      }
      .bottom{
        padding: 10px 0;
        >div{
          float: left;
          text-align: center;
          box-sizing: border-box;
          height: 101px;
          display:flex;
          flex-direction: column;
          justify-content:center;
          align-items: center;
          p{
            padding-top:5px;
            color:#666;
            font-size: 14px;
          }
          span{
            display: inline-block;
            color: #333;
            font-size: 16px;
            span{
              font-size: 12px
            }
            i{
              font-size: 12px;
              color: #FF9200;
              margin-left: 5px;
            }
          }
        }
        .l{
          width: 50%;
          border-right:1px solid #e9e9e9;          
        }
        .r{
          width: 50%
        }
        .b{
          border-top:1px solid #e9e9e9;
          width: 100%
        }
      }
    }
  }
}
</style>